<template>
	<div>
	    <tabbar class="footer">
	    	<tabbar-item v-for='footer in footers' :selected="footer.selected" :link="footer.link" :key="footer.module">
	        	<img slot="icon" :src="footer.src">
	        	<img slot="icon-active" :src="footer.srcActive">
	        	<span slot="label">{{footer.txt}}</span>
	      	</tabbar-item>
	    </tabbar>
	</div>
</template>
<script>
	import { Tabbar, TabbarItem, Group, Cell } from 'vux'
	export default {
		components: {
		    Tabbar,
		    TabbarItem,
		    Group,
		    Cell
		},
		data () {
            return {
                footers :[
                	{
                		module : 'index' , 
                		txt : '首页' , 
                		link : '/index' , 
                		selected : false,
                		src : require('touch/assets/footer/index.png') , 
                		srcActive : require('touch/assets/footer/index_active.png')},
                	{
                		module : 'home' ,
                		txt : '个人' ,
                		link : '/home' ,
                		selected : false,
                		src : require('touch/assets/footer/home.png') ,
                		srcActive : require('touch/assets/footer/home_active.png')},
                ]
            }
        },
        methods:{
        },
        created : function(){
        	var path = document.location.href.split('/#/'),
        		pathArr = path.length==1 ? new Array() : path[1].split('/'),
        		module = pathArr[0] !=undefined ? pathArr[0] : '';
        	for(var i in this.footers){
        		if(this.footers[i]['module']==module){
        			this.footers[i]['selected'] = true;
        		}
        	}
        },
	}
</script>
<style lang="less">
	.footer .weui-tabbar__label {
	    line-height: 0.2 !important;
	}
	.footer .weui-tabbar__item{
		text-decoration: none;
	}
	.footer .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
	.footer .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, 
	.footer .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
	    color: #ff5d83 !important;
	}
</style>